<template>
  <div class="container">
    <div class="banner">
      <img
        src="http://www.juyike.cn/Public/Home/images/img_con/jszr.jpg"
        alt="聚首聚益科"
      />
      <h2>聚首聚益科</h2>
    </div>
    <div class="doc">
      <ul class="navbar">
        <li>
          <a href="">人才机制</a>
        </li>
        <li>
          <a href="">多彩聚益科</a>
        </li>
        <li>
          <a href="">员工风采</a>
        </li>
        <li>
          <a href="">加入我们</a>
        </li>
      </ul>
      <div class="content">
        <div class="fl">
          <p class="tit">
            “为员工创造价值”是聚益科的重要使命之一。我们尊重人才，重视人才培养，致力于为每一个追求卓越的员工打造事业的舞台。我们秉承公开公正公平的原则，搭建阳光规范的管理体系，以包容、积极的心态广纳愿意与公司共同成长的精英。
          </p>
          <p class="side">
            <span>我们倡导尊重认可 使您在这里获得成就的喜悦</span><br />
            <span>我们倡导尊重认可 使您在这里获得成就的喜悦</span><br />
            <span>我们倡导尊重认可 使您在这里获得成就的喜悦</span><br />
            <span>我们倡导尊重认可 使您在这里获得成就的喜悦</span><br />
          </p>
        </div>
        <div class="fr">
          <img
            src="http://www.juyike.cn/Public/Home/images/img_con/img0001.jpg"
            alt=""
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { GaterJYK_list } from '@/api/index.js';
export default {
  data() {
    return {
      enterpricedata:[],
    };
  },
  created() {
    this.getData();
  },
  methods: {
     
    // 获取数据
    getData() {
      const data={id:'148320210519170525'}
      
      GaterJYK_list(data).then(res=> {
          console.log(res.data,'聚首聚益科');
          this.enterpricedata = res.data
      })
      .catch(error=>{
          console.log(error)
      });
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  width: 78.5%;
  left: 12.5%;
  position: absolute;
  top: 0;
  min-width: 1050px;
  max-width: 1200px;
  box-shadow: 5px 0 5px #f0f0f0;
  font-family: "微软雅黑";
  .banner {
    width: 100%;
    position: relative;
    img {
      width: 100%;
    }
    h2 {
      font-weight: 500;
      color: #fff;
      opacity: 0.7;
      font-size: 42px;
      line-height: 42px;
      position: absolute;
      left: 25px;
      top: 40%;
    }
  }
  .doc {
    padding: 0 0 50px 30px;
    .navbar {
      background: url(http://www.juyike.cn/Public/Home/images/jyknavBg.jpg)
        no-repeat 0 bottom;
      width: 80%;
      margin: 30px auto;
      list-style-type: none;
      li {
        width: 25%;
        height: 115px;
        float: left;
        text-align: center;
        cursor: pointer;
        a {
          color: #ee020d;
          font-size: 20px;
          height: 115px;
          line-height: 115px;
          display: inline-block;
          width: 100%;
          text-decoration: none;
        }
        a:hover {
          background: url(http://www.juyike.cn/Public/Home/images/hover.jpg)
            no-repeat;
          color: #fff;
          background-size: 100% 115px;
        }
      }
    }
    .navbar:after {
      content: "\20";
      display: block;
      clear: both;
      height: 0;
      overflow: hidden;
    }
    .content {
      margin-top: 100px;
      .fl {
        float: left;
        width: 40%;
        text-align: left;
        .tit {
          font-size: 14px;
          color: #666;
          line-height: 30px;
          margin: 0 0 0 10%;
        }
        .side {
          font-size: 16px;
          line-height: 40px;
          margin: 5% 0 0 20%;
        }
      }
      .fr {
        float: right;
        width: 45%;
        margin-right: 5%;
        img {
          max-width: 573px;
          width: 100%;
        }
      }
    }
  }
}
</style>
